<script setup lang="ts">
import { onMounted, Ref, ref } from "vue";
import useHomeStore from "@/pinia/modules/homeStore/homeStore.ts";
import { storeToRefs } from "pinia";
import type { Brand } from "@/types/homeTypes/homeTypes.ts";

const homeStore = useHomeStore();

const { hotBrandList }: { hotBrandList: Ref<Brand[]> } = storeToRefs(homeStore);


const flag = ref(-1);

const handleToggle = (step: number) => {
   flag.value = step;
};

homeStore.fetchHotBrandList(10);

</script>

<template>
   <panel title="热门品牌" sub-title="国际经典 品质保证">
      <template #right>
         <a class="iconfont icon-angle-left prev" :class="{disabled:flag===-1}" @click="handleToggle(-1)"></a>
         <a class="iconfont icon-angle-right next" :class="{disabled:flag===1}" @click="handleToggle(1)"></a>
      </template>
      <div class="box">
         <el-skeleton animated :count="5" :loading="!hotBrandList.length">
            <template #template>
               <el-skeleton-item variant="image"></el-skeleton-item>
            </template>
            <template #default>
               <ul class="list" :class="{translate:flag===1}">
                  <li v-for="(item) in hotBrandList" :key="item!.id">
                     <RouterLink to="/">
                        <img :src="item.logo" alt="" :title="item.desc">
                     </RouterLink>
                  </li>
               </ul>
            </template>
         </el-skeleton>
      </div>
   </panel>
</template>

<style scoped lang="less">
.panel {
   background: #f5f5f5
}

.iconfont {
   width: 20px;
   height: 20px;
   background: #ccc;
   color: #fff;
   display: inline-block;
   text-align: center;
   margin-left: 5px;
   background: @xtxColor;

   &::before {
      font-size: 12px;
      position: relative;
      top: -2px
   }

   &.disabled {
      background: #ccc;
      cursor: not-allowed;
   }
}

.box {
   display: flex;
   width: 100%;
   height: 345px;
   overflow: hidden;
   padding-bottom: 40px;

   .list {
      width: 200%;
      display: flex;
      transition: all 1s;

      li {
         margin-right: 10px;
         width: 240px;

         &:nth-child(5n) {
            margin-right: 0;
         }

         img {
            width: 240px;
            height: 305px;
         }
      }
   }
}

.translate {
   transform: translateX(-1240px);
}

.el-skeleton{
   display: flex;
   justify-content: space-between;
   .el-skeleton__item{
      width: 240px;
      height: 100%;
   }
}
</style>
